<template>
	<view class="pageBg">
		<view class="header">
			<view class="search">
				<text class="cuIcon-search icon"></text>
				<input class="inp" placeholder="请输入订单编号" @confirm="orderSearch" />
			</view>
			<view class="tab">
				<view class="item" @click="tab(index)" :class="swiperCur === index ? 'itemAct' : ''" v-for="(i, index) in tabList">
					{{ i.name }}
				</view>
			</view>
		</view>
		<paginationScrolling ref="paginationScrolling" :tabList="tabList" :swiperCur="swiperCur" @tabChange="tabChange" @scrolltoupper="scrolltoupper" @scrolltolower="scrolltolower">
			<template v-for="(item, index) in tabList" :slot="'scrollList' + index">
				<order-list :List="list" :tabList="tabList"></order-list>
			</template>
		</paginationScrolling>
	</view>
</template>

<script>
	import orderList from '@/components/my/order/orderList.vue';

	import paginationScrolling from '@/components/paginationScrolling/paginationScrolling.vue';
	import { scrollViewScroll } from '@/utils/mixins.js';
	export default {
		mixins: [scrollViewScroll],
		components: {
			orderList,
		},
		data() {
			return {
				type: undefined,
				order_sn: null,
				swiperCur: 0,
				tabList: [
					{
						name: '全部',
						type: 'all',
						list: [],
					},
					{
						name: '待付款',
						type: 0,
					},
					{
						name: '待使用',
						type: 1,
						list: [],
					},

					{
						name: '已使用',
						type: 3,
						list: [],
					},
					{
						name: '退款中',
						type: 2,
						list: [],
					},
					{
						name: '已退款',
						type: 4,
						list: [],
					},
					
				],
			};
		},
		onLoad({ type }) {
			this.type = type;
			for (let i in this.tabList) {
				console.log(this.tabList[i].type, type);
				if (this.tabList[i].type == type) {
					this.swiperCur = Number(i);
				}
			}

			this.init();
		},

		methods: {
			tabChange({ item, index }) {
				this.reset();
				this.swiperCur = index;
				this.type = this.tabList[index].type;

				this.init();
			},
			orderSearch({ detail }) {
				this.reset();
				this.order_sn = detail.value;
				this.init();
			},
			tab(index) {
				this.reset();
				this.type = this.tabList[index].type;
				this.swiperCur = index;
				this.init();
			},
			async init() {
				const { data } = await this.$api.OrderLists({
					order_status: this.type,
					...this.page,
					order_sn: this.order_sn,
				});

				this.list = [...this.list, ...data.list];

				this.page.count = data.count;
			},
		},
	};
</script>

<style lang="scss" scoped>
	.pageBg {
		overflow: initial;
		min-height: auto;
		.header {
			width: 100%;
			height: 145rpx;
			background: #ffffff;
			position: sticky;
			top: 0px;
			z-index: 5;
			.search {
				width: $connet-width;
				margin: 0 auto;
				height: 60rpx;
				line-height: 60rpx;
				background: #f5f5f5;
				border-radius: 30rpx;
				overflow: hidden;
				position: relative;

				.icon {
					position: absolute;
					color: $price-color;
					width: 24rpx;
					height: 24rpx;
					display: block;
					left: 23rpx;
				}

				.inp {
					position: absolute;
					width: 100%;
					height: 100%;
					padding: 0;
					margin: 0;
					font-size: $uni-font-size-12;
					padding-left: 60rpx;
				}
			}

			.tab {
				width: $connet-width;
				margin: 0 auto;
				line-height: 86rpx;
				display: flex;
				justify-content: space-between;
				height: auto;

				.item {
					position: relative;
					color: #999999;
				}

				.itemAct {
					color: $price-color;

					&:before {
						content: '';
						height: 4rpx;
						width: 100%;
						background: $price-color;
						border-radius: 2rpx;
						position: absolute;
						left: 0;
						bottom: 0;
					}
				}
			}
		}
	}
</style>
